body{
    background-color: black;
}

h3{

    color: rgb(201, 187, 187);

}

h2{
    color: darkgrey;

}

h1{

    color: rgb(201, 187, 187);
}

#voltar{
    position: absolute;
    height: 100px;
    width: 200px;
    margin-top: 300px;


}

#container{

    max-width: 1400px;
    margin: 0 auto;

}

 #voltar{
        position: absolute;
        margin-top: 25px;
        height: 50px;
        width: 200px;
        margin-top: px;
        border-radius: 20px;
        background-color: rgb(0, 0, 0);
        margin-left: 20px;

    }

#voltar:hover{
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#voltar img{

    margin-left: 154px;
}

#voltart{
    position: absolute;
    margin-top: 2px;
    height: 50px;
    width: 200px;
    border-radius: 20px;
    background-color: rgb(0, 0, 0);
    margin-left: 20px;

}

#voltart:hover{
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#voltart img{

    margin-left: 154px;
}


#geraltorneios{

    margin-left: 50px;
    width: 1200px;
    height: 1100px;
    background-color: #4F4F4F;
    border-radius: 30px;

}

#geraltorneios2{

    margin-left: 50px;
    width: 1200px;
    height: 1800px;
    background-color: #4F4F4F;
    border-radius: 30px;

}

#statustorneio{

    background: rgba(0, 0, 0, 0.8);
    height: 400px;
    width: 400px;
    border-radius: 40px;
    position: absolute;
    margin-top: 180px;
    margin-left: 600px;
    font-family: 'Roboto', sans-serif;
    font-size: 150%;
    padding-left: 20px;
}

#host{
    width: 220px;
    height: 200px;
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    margin-top: 370px;
    margin-left: 140px;
    border-radius: 40px;
    padding-top: 10px;
}

#host h1{
    position: absolute;
    margin-left: 50px;
    margin-top: -5px;
}

#hostname{
    font-family: 'Permanent Marker', cursive;
    font-size: 280%;
    color: azure;
    position: absolute;
    margin-top: 320px;
    margin-left: 200px;
    text-shadow: 
               -1px -1px 0px rgb(0, 0, 0), 
               -1px 2px 0px rgb(0, 0, 0),                    
                2px -1px 0px rgb(0, 0, 0),                  
                2px 0px 0px rgb(0, 0, 0);
}

#usabilidade{
 position: absolute;
 font-family: 'Permanent Marker', cursive;
 font-size: 280%;
 text-shadow: 
 -1px -1px 0px rgb(0, 0, 0), 
 -1px 2px 0px rgb(0, 0, 0),                    
  2px -1px 0px rgb(0, 0, 0),                  
  2px 0px 0px rgb(0, 0, 0);
  color: azure;
  margin-top: 140px;
  margin-left: 600px;
}



#statustime{

    background: rgba(0, 0, 0, 0.8);
    width: 980px;
    height: 300px;
    border-radius: 40px;
    position: absolute;
    margin-top: 700px;
    margin-left: 100px;
    font-family: 'Roboto', sans-serif;
}

a:link {
    color: rgb(201, 187, 187);
    text-decoration: none;}


#statustime h1{

    position: absolute;
    margin-left: 20px;
    margin-top: 30px;
}

#fotobanner {
    border-radius: 20px;
}

#juskk{ 
    position: absolute;
    margin-top: -400px;
    margin-left: 400px;
}

#principal{
    background-color: red   ;
    width: 1200px;
    height: 500px;
    margin-top: 40px;
    margin-left: 45px;
    border-radius: 30px;
}

#pricipal img{
    border-radius: 30px;
}

#quadro1{
    background-color: yellow;
    height: 300px;
    width: 390px;
    float: left;
    margin-left: 44px;
    margin-top: 20px;
    margin-bottom: 30px;
    border-radius: 30px;
}

#quadro2{
    background-color: yellow;
    width: 390px;
    height: 300px;
    float: left;
    margin-left: 70px;
    margin-top: 20px;
    margin-bottom: 30px;
    border-radius: 30px;

}

#quadro3{
    background-color: yellow;
    width: 390px;
    height: 300px;
    float: left;
    margin-left: 60px;
    margin-top: 20px;
    margin-bottom: 30px;
    border-radius: 30px;

}
#quadro5{

    float: left;
    margin-left: 100px;
    margin-top: -20px;
    margin-bottom: 30px;
    border-radius: 30px;

}

.figure.torneiosfoto img{
    border-radius: 20px;
    margin-left: -20px;
    padding-left: 20px;

}

figure.fotobanner{
    border-radius: 30px;
    margin-left: -20px;
    padding-left: 20px;
}

#geral{
    margin-left: 100px;
    width: 1100px;
    height: 3800px;
    background-color: #4F4F4F;
    border-radius: 30px;
}

#geral2{
    margin-left: 100px;
    width: 1100px;
    height: 1200px;
    background-color: #4F4F4F;
    border-radius: 30px;
}

#banner1{
    margin-top: 40px;
    margin-left: 50px;
    height: 250px;
    width: 500px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 40px;
    position: absolute;
}

#nometorneio{
    background: rgba(0, 0, 0, 0.7);
    height: 70px;
    width: 500px;
    margin-left: 600px;
    margin-top: 40px;
    position: absolute;
    border-radius: 40px;
    font-family: 'Roboto', sans-serif;
    font-size: 80%;
}

#host2{
    width: 220px;
    height: 200px;
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    margin-top: 370px;
    margin-left: 140px;
    border-radius: 40px;
    padding-top: 10px;
}

#host2 h1{
    padding-top: -50px;
    position: absolute;
    margin-left: 25px;
    margin-top: -5px;
}

#t1 img{

    position: absolute;
    margin-left: -175px;
    margin-top: 5px;
}

#t1 h2{
    position: absolute;
    margin-top: 185px;
    margin-left: 100px;
}

#t1{
    padding-left: 0%;
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 90px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
    font-size: 100%;

}

#t2{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 610px;
    border-radius: 20px;
    margin-top: 90px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t2 img{

    position: absolute;
    margin-left: -175px;
    margin-top: 5px;
}

#t2 h2{
    position: absolute;
    margin-top: 185px;
    margin-left: 130px;
}

#t3{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 400px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t3 img{

    position: absolute;
    margin-left: -175px;
    margin-top: 5px;
}

#t3 h2{
    position: absolute;
    margin-top: 185px;
    margin-left: 70px;
}

#t4{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 610px;
    border-radius: 20px;
    margin-top: 400px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t4 img{

    position: absolute;
    margin-left: -175px;
    margin-top: 5px;
}

#t4 h2{
    position: absolute;
    margin-top: 185px;
    margin-left: 130px;
}

#t5{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 710px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t5 img{
    position: absolute;
    margin-left: -175px;
    margin-top: 5px;
}

#t5 h2{
    position: absolute;
    margin-top: 185px;
    margin-left: 100px;
}

#t6{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 610px;
    border-radius: 20px;
    margin-top: 710px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t6 img{

    position: absolute;
    margin-left: -183px;
    margin-top: 5px;
}

#t6 h2{
    position: absolute;
    margin-top: 185px;
    margin-left: 140px;
}

#t7{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 1020px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t8{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 610px;
    border-radius: 20px;
    margin-top: 1020px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t9{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 1330px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t10{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 610px;
    border-radius: 20px;
    margin-top: 1330px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t11{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 1640px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t12{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 610px;
    border-radius: 20px;
    margin-top: 1640px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t13{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 1950px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t14{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 610px;
    border-radius: 20px;
    margin-top: 1950px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t15{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 2260px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t16{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 610px;
    border-radius: 20px;
    margin-top: 2260px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t17{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 2570px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t18{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 610px;
    border-radius: 20px;
    margin-top: 2570px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t19{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 2880px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t20{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 610px;
    border-radius: 20px;
    margin-top: 2880px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#t21{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 3190px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}


#t1:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#t1:active {
    transform: scale(1);
    background-position: 500px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }

  #t2:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t3:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t4:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t5:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t6:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t7:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t8:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t9:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t10:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t11:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t12:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t13:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t14:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t15:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t16:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t17:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t18:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t19:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t20:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#t21:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#quadro2:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#quadro3:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#quadro1:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#quadro5:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#nomedaskin{

    height: 50px;
    width: 700px;
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    margin-top: 70px;
    margin-left: 100px;
    border-radius: 20px;
}

#nomedaskin h2{
    margin-top: 10px;
}

#infoskin{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    height: 500px;
    width: 500px;
    margin-top: 130px;
    margin-left: 400px;
    border-radius: 40px;


}

#galeriaskin {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    height: 565px;
    width: 1200px;
    margin-top: 800px;

}


#downloads{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);;
    height: 200px;
    width: 600px;
    margin-top: 1470px;
    margin-left: 270px;
    border-radius: 20px;

}


#download{

    position: absolute;
    font-family: 'Permanent Marker', cursive;
    font-size: 280%;
    text-shadow: 
    -1px -1px 0px rgb(0, 0, 0), 
    -1px 2px 0px rgb(0, 0, 0),                    
     2px -1px 0px rgb(0, 0, 0),                  
     2px 0px 0px rgb(0, 0, 0);
     color: azure;
     margin-top: 1450px;
     margin-left: 470px;

}


#infoskin h1{

    margin-left: 20px;
    margin-top: 80px;


}

#gale{
    position: absolute;
    font-family: 'Permanent Marker', cursive;
    font-size: 370%;
    text-shadow: 
    -1px -1px 0px rgb(0, 0, 0), 
    -1px 2px 0px rgb(0, 0, 0),                    
     2px -1px 0px rgb(0, 0, 0),                  
     2px 0px 0px rgb(0, 0, 0);
     color: azure;
     margin-top: 720px;
     margin-left: 470px;

}

#s1 img{

    position: absolute;
    margin-left: -210px;
    margin-top: -10px;
}

#s1 h2{
    position: absolute;
    margin-top: 200px;
    margin-left: 80px;
}

#s1{
    padding-left: 0%;
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 90px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
    font-size: 80%;

}

#s2{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 610px;
    border-radius: 20px;
    margin-top: 90px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#s2 img{

    position: absolute;
    margin-left: -210px;
    margin-top: -10px
}

#s2 h2{
    position: absolute;
    margin-top: 195px;
    margin-left: 160px;
}

#s3{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 400px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#s3 img{

    position: absolute;
    margin-left: -210px;
    margin-top: -10px
}

#s3 h2{
    position: absolute;
    margin-top: 195px;
    margin-left: 15px;
}

#s4{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 610px;
    border-radius: 20px;
    margin-top: 400px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#s4 img{

    position: absolute;
    margin-left: -210px;
    margin-top: -10px
}

#s4 h2{
    position: absolute;
    margin-top: 195px;
    margin-left: 160px;
}

#s5{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 40px;
    border-radius: 20px;
    margin-top: 710px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#s5 img{
    position: absolute;
    margin-left: -210px;
    margin-top: -10px
}

#s5 h2{
    position: absolute;
    margin-top: 195px;
    margin-left: 100px;
}

#s6{
    height: 250px;
    width: 450px;
    background: rgba(0, 0, 0, 0.8);
    margin-left: 610px;
    border-radius: 20px;
    margin-top: 710px;
    position: absolute;
    font-family: 'Roboto', sans-serif;
}

#s6 img{

    position: absolute;
    margin-left: -210px;
    margin-top: -10px
}

#s6 h2{
    position: absolute;
    margin-top: 195px;
    margin-left: 170px;
}

#s3:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#s4:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#s5:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#s6:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#s2:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}


#s1:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#imggen{

    border-radius: 20px;
}


#gen1{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    height: 512px;
    width: 160px;
    margin-left: 50px;
    margin-top: 100px;
    border-radius: 20px;
}

#gen1:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#gen2{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    height: 512px;
    width: 160px;
    margin-left: 250px;
    margin-top: 100px;
    border-radius: 20px;
}

#gen2:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#gen3{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    height: 512px;
    width: 160px;
    margin-left: 450px;
    margin-top: 100px;
    border-radius: 20px;
}

#gen3:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#gen4{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    height: 512px;
    width: 160px;
    margin-left: 650px;
    margin-top: 100px;
    border-radius: 20px;
}

#gen4:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#gen5{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    height: 512px;
    width: 160px;
    margin-left: 850px;
    margin-top: 100px;
    border-radius: 20px;
}

#gen5:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#gen6{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    height: 512px;
    width: 160px;
    margin-left: 50px;
    margin-top: 650px;
    border-radius: 20px;
}

#gen6:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#gen7{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    height: 512px;
    width: 160px;
    margin-left: 250px;
    margin-top: 650px;
    border-radius: 20px;
}

#gen7:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#gen8{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    height: 512px;
    width: 160px;
    margin-left: 450px;
    margin-top: 650px;
    border-radius: 20px;
}

#gen8:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#gen9{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    height: 512px;
    width: 160px;
    margin-left: 650px;
    margin-top: 650px;
    border-radius: 20px;
}

#gen9:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#gen10{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    height: 512px;
    width: 160px;
    margin-left: 850px;
    margin-top: 650px;
    border-radius: 20px;
}

#gen10:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#gen11{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    height: 512px;
    width: 160px;
    margin-left: 850px;
    margin-top: 650px;
    border-radius: 20px;
}

#gen11:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#gen11{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    height: 512px;
    width: 160px;
    margin-left: 50px;
    margin-top: 1200px;
    border-radius: 20px;
}

#gen12{
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    height: 512px;
    width: 160px;
    margin-left: 250px;
    margin-top: 1200px;
    border-radius: 20px;
}

#gen12:hover {
    transform: scale(1.1);
    background-position: -60px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#geralgenshi{
    max-width: 1400px;
    margin: 0 auto;
    background-image: url("../img/fundo.jpg");
    border-radius: 30px;
}

#pyrogeral{
    margin-left: 100px;
    width: 1100px;
    height: 1080px;
    background-image: url("../img/PYRO BG Blank.png");
    opacity: 80%;
    border-radius: 30px;
}   


#galeriagen{
    position: absolute;
    width: 1100px;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.8);
    margin-top: 500px;
}

.banner { position: relative; overflow: auto; }
    .banner li { list-style: none; }
        .banner ul li { float: left; }



#character{
    position: absolute;
    margin-left: 300px;

}

#geogeral{
    margin-left: 100px;
    width: 1100px;
    height: 1080px;
    background-image: url("../img/GEO BG Blank.png");
    opacity: 90%;
    border-radius: 30px;
}